<template>
  <div class="wrapper">
    <ul>
      <li
          v-for="(item, index) in areaJ"
          :key="index"
          :class="{active:storeArea_z === item.id}"
          @click="areaB(item.id,item.title)"
        >{{item.title}}</li>
    </ul>
    <div class="input clearfix">
      <div>
        <input type="text" @input="mArea" v-model="minAreaModel" placeholder="20">-
      </div>
      <div>
        <input type="text" @input="mArea" v-model="maxAreaModel" placeholder="50">㎡
      </div>
      <div :class="{action:Areabuttom}" @click="AreabuttomB">确定</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CompanyArea',
  data () {
    return {
      maxAreaModel: '',
      minAreaModel: '',
      areaJ: [{
        id: '0-20',
        title: '20㎡以下'
      }, {
        id: '20-50',
        title: '20㎡-50㎡'
      }, {
        id: '50-100',
        title: '50㎡-100㎡'
      }, {
        id: '100-200',
        title: '100㎡-200㎡'
      }, {
        id: '200-500',
        title: '200㎡-500㎡'
      }, {
        id: '500-100000',
        title: '500㎡以上'
      }],
      storeArea_z: 0,
      Areabuttom: false
    }
  },
  methods: {
    areaB (id, name) {
      this.storeArea_z = id
      this.$emit('is_areaB', this.storeArea_z)
    },
    mArea () {
      this.storeArea_z = 0
      if (this.minAreaModel !== '' && this.maxAreaModel !== '') {
        this.Areabuttom = true
      } else {
        this.Areabuttom = false
      }
    },
    AreabuttomB () {
      if (this.minAreaModel * 1 >= this.maxAreaModel * 1) {
        this.$toast('最小面积不能大于等于最大面积')
      } else {
        this.$emit('is_areaB', this.minAreaModel + '-' + this.maxAreaModel)
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
  position absolute
  width 100%
  z-index 999
  background #fff
  top 1.1rem
  ul
    width 100%
    text-align center
    line-height .88rem /* 44/50 */
    font-size .3rem
    .active
      color #F6360A
  .input
    height 1.4rem /* 70/50 */
    box-shadow: 0px -1px 3px 0px rgba(4, 0, 0, 0.05)
    padding .3rem .4rem /* 20/50 */ /* 15/50 */
    div
      float left
      width 35%
      height .8rem /* 40/50 */
      line-height .8rem
      input
        width 80%
        border-bottom 1px solid rgba(0,0,0,.1)
        text-align center
        color #333333
      input::placeholder
        color #999
    div:nth-child(3)
      width 30%
      background-color #F8F8F8
      font-size .36rem /* 18/50 */
      color #999999
      border-radius .1rem /* 5/50 */
      text-align center
    div:nth-child(3).action
      background: linear-gradient(90deg, #F14510, #EE340F)
      box-shadow: 1px 1px 5px 0px rgba(255, 1, 1, 0.42)
      color #fff
</style>
